<template>
	<view>
		<view class="topimg">
			<u-swiper style="height: 240rpx;border-radius: 20rpx;" :list="imageList" keyName="src"
				@change="e => current = e.current" :autoplay="true">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in imageList" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<view class="store_list flex">
			<image :src="$fun.imgUrl(business.logoimage)" mode=""></image>
			<view class="itemright">
				<view class="flex">
					<view class="istag" v-if='business.typename'>{{business.typename}}</view>
					<view class="name">{{business.name}}</view>
				</view>
				<view class="km">距离：{{business.juli}}</view>
				<view class="isAddress">地址：{{business.address}}</view>
			</view>
		</view>
		<view class="store_brief">
			<view class="name">商家简介</view>
			<view class="" v-html="business.content">

			</view>
		</view>
		<view class="store_pay flex-between">
			<view class="">支付金额</view>
			<input type="number" style="text-align: right;"
				placeholder-style="font-weight: 400;font-size: 28rpx;color: #CCCCCC;" v-model="paymoney"
				placeholder="请输入支付金额" />
		</view>
		<view class="store_btn" @click="create">立即支付</view>
		<showpayVue ref="child" :showpaymodel="showpaymodel" :type="type" @showpaybtn="showpaybtn">
		</showpayVue>
	</view>
</template>

<script>
	import showpayVue from '@/components/showpay.vue';
	export default {
		components: {
			showpayVue
		},
		data() {
			return {
				business: {},
				imageList: [],
				ids: '',
				nums: 1,
				paymoney: '',
				current: '',
				showpaymodel: false,
				oid: '',
				type: 'shop',
				payvalue: '',
				payType: '',
				bid: '',
				lng: '',
				lat: ''
			}
		},
		onLoad(option) {
			this.bid = option.id
			this.lng = option.lng
			this.lat = option.lat
			this.$nextTick(() => {
				this.getBusiness()
			})
		},
		methods: {
			showpaybtn(showpaymodel, payvalue, payType) {
				this.showpaymodel = showpaymodel
				if (payType) {
					this.payvalue = payvalue
					this.payType = payType
					this.ordershopPay()
				}
			},
			getBusiness() {
				this.$fun.ajax.post('user/business', {
					bid: this.bid,
					lng: this.lng,
					lat: this.lat
				}).then(res => {
					this.business = res.data
					this.ids = res.data.id
					let imgList = res.data.images.split(',');
					for (var i = 0; i < imgList.length; i++) {
						imgList[i] = this.$fun.imgUrl(imgList[i])
					}
					this.imageList = imgList
				})
			},
			create() {
				if (!this.paymoney) {
					this.$fun.msg('请输入支付金额')
					return;
				}
				uni.showLoading({
					title: '加载中...'
				})
				setTimeout(() => {
					this.showmodel = false
					this.showpaymodel = true
					this.zIndex = 0
					uni.hideLoading()
				}, 1000)
				this.$refs.child.getorder('');

			},
			ordershopPay() {
				this.$fun.ajax.post('order/shopPay', {
					id: this.ids,
					money: this.paymoney,
					type: this.payType,
					paypwd: this.payvalue
				}).then(res => {
					if (res.code == 1) {
						setTimeout(() => {
							this.$fun.jump(`/pageA/order/order??state=0`, 2)
						}, 1100)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F2EDED;
	}

	.topimg {
		width: 690rpx;
		height: 240rpx;
		margin: 20rpx auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.store_list {
		width: 690rpx;
		// height: 180rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto 20rpx;
		padding: 20rpx;

		.itemright {
			margin-left: 16rpx;

			.istag {
				width: 60rpx;
				height: 32rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #FF6B4D;
				font-weight: 400;
				font-size: 20rpx;
				color: #FF6B4D;
				text-align: center;
			}

			.name {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-left: 4rpx;
			}

			.km,
			.isAddress {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				width: 456rpx;
				// white-space: nowrap;
				// overflow: hidden;
				// text-overflow: ellipsis;
				margin-top: 16rpx;
			}
		}

		image {
			width: 140rpx;
			height: 140rpx;
		}
	}

	.store_brief {
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 20rpx;
		margin: 0 auto;

		.name {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}
	}

	.store_pay {
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto;
		padding: 0 20rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	.store_btn {
		width: 690rpx;
		height: 88rpx;
		background: #FF5534;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		margin: 180rpx auto;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>